<template>
    <div>
        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide><div class="swiperItem">1</div></swiper-slide>
            <swiper-slide><div class="swiperItem">2</div></swiper-slide>
            <swiper-slide><div class="swiperItem">3</div></swiper-slide>
            <swiper-slide><div class="swiperItem">4</div></swiper-slide>
            <swiper-slide><div class="swiperItem">5</div></swiper-slide>
            <!-- 分页 -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'Index',
    data() {
      return {
        swiperOptions: {
            loop:true,
            delay:1,
            autoplay:true,
            pagination: {
            el: '.swiper-pagination',
          },
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
}
</script>

<style lang="scss" scoped>
.swiperItem{
    text-align: center;
    font-size: 20px;
    height: 200px;
    border: 1px solid red;
}
</style>